.read-the-docs{
  font-size: 48px;
  background-color: white;
  /*
  如果没有设置背景图片（background-image）或背景颜色（background-color），
  那么这个属性只有在边框（ border）被设置为非固实（soild）、透明或半透明时才能看到视觉效果（与 border-style 或 border-image 有关），
  否则，本属性产生的样式变化会被边框覆盖。
  */
  background-clip: text;

  /*
  防止部分浏览器不支持light-dark，多写一遍
  */
  color: transparent;
  /*
  2024年最新设置亮暗主题的新方式
  */
  color: light-dark(transparent, yellow)
}

.home{
  width: 100%;
  height: 100vh;
  /*  块级元素居中新方式 */
  align-content: center;
  text-align: center;
}

/*
@property规则属于CSS Houdini中的一个特性，可以自定义CSS属性的类型
规则@property必须同时包含syntax和inherits描述符。如果缺少其中之一，则整个@property规则无效并被忽略。
未知描述符无效并会被忽略，但不会使@property规则无效。
*/
@property --colorA {
  syntax: "<color>";
  inherits: false;
  initial-value: red;
}

@property --colorB {
  syntax: "<color>";
  inherits: false;
  initial-value: yellow;
}

@property --colorC {
  syntax: "<color>";
  inherits: false;
  initial-value: blue;
}

@keyframes animate {
  20% {
    --colorA: blue;
    --colorB: #F57F17;
    --colorC: red;
  }

  40% {
    --colorA: #FF1744;
    --colorB: #5E35B1;
    --colorC: yellow;
  }

  60% {
    --colorA: #E53935;
    --colorB: #1E88E5;
    --colorC: #4CAF50;
  }

  80% {
    --colorA: #76FF03;
    --colorB: teal;
    --colorC: indigo;
  }
}

/*
2019年设置亮暗主题的方式
*/
@media (prefers-color-scheme: light) {
  .home{
    background: linear-gradient(45deg,
    var(--colorA),
    var(--colorB),
    var(--colorC));
    animation: animate 3s linear infinite alternate;
  }
}

@media (prefers-color-scheme: dark) {
  .home{
    background: black;
    color: white;
  }

  .read-the-docs:hover {
    color: #1E88E5;
    filter: drop-shadow(0 0 24px white);
  }
}


